<template>
    <v-container>
        <v-simple-table dense>
            <template v-slot:default>
                <thead>
                    <tr>
                        <th class="text-left" style="width: 200px" >
                            图片
                        </th>
                        <th class="text-left">
                            链接
                        </th>
                        <th style="width: 180px">
                            打开方式
                        </th>
                        <th style="width: 150px">
                            操作
                        </th>
                    </tr>
                </thead>

                <draggable v-model="banners" tag="tbody">
                    <tr v-for="(item, index) in banners" :key="index" >
                        <td style="cursor: move" class="pa-0">
                            <v-img contain :src="item.image" style="width: 200px" ></v-img> 
                        </td>
                        <td>
                            <v-text-field v-model="item.link" placeholder="跳转链接"></v-text-field>
                        </td>
                        <td>
                            <v-select :items="targetItem"  clearable v-model="item.target" label="打开方式"> </v-select>
                        <td>
                            <v-btn text @click="remove(index)">删除</v-btn>
                        </td>
                    </tr>
                </draggable>

                <tbody>
                    <tr >
                        <td class="pa-0">
                            <ImageUpload v-model="image"></ImageUpload>
                        </td>
                        <td>
                            <v-text-field v-model="link" placeholder="跳转链接"></v-text-field>
                        </td>
                        <td>
                             <v-select :items="targetItem"  clearable v-model="target" label="打开方式"> </v-select>
                        </td>
                        <td>
                            <v-btn depressed @click="addNewItem" :disabled="image.length == 0">
                                <v-icon>mdi-plus</v-icon>添加
                            </v-btn>
                        </td>
                    </tr>
                </tbody>
            </template>
        </v-simple-table>

        <v-divider class="mb-4"></v-divider>
        <v-row dense no-gutters>
            <v-col>
                <v-btn depressed color="primary" class="mr-2" @click="save" :loading="saving">保存</v-btn>
            </v-col>
        </v-row>

    </v-container>
</template>

<script>
    import axios from "axios";
    import ImageUpload from "../../../widgets/ImageUpload.vue";
    import { mapGetters } from 'vuex';
    import draggable from 'vuedraggable'

    export default {
        data: () => ({
            banners: [],
            image: "",
            link: '',
            target: '_blank',
            targetItem: [
                { value: '_blank', text: '新窗口' },
                { value: '_self', text: '当前窗口' },
            ],
            saving: false
        }),

        components: {
            draggable,
            ImageUpload: ImageUpload,
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager'
            ]),
        },

        created() {
            this.load();
        },

        methods: {
            addNewItem() {
                const item = {
                    image : this.image,
                    link : this.link,
                    target : this.target
                }

                this.banners.push(item);

                this.image = '';
                this.link = '';
                this.target = '_blank';
            },
            remove(i) {
                this.banners.splice(i, 1);
            },
            load() {
                axios.get(`/app/setting/banner`).then((response) => {
                    if(response.data.code == 0) {
                        this.banners = response.data.data ?  response.data.data : [];
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

            save() {
                this.saving = true;
                const that = this;
                axios.post(`/app/setting/banner`, {value: this.banners}).then((response) => {
                    if (response.data.code == 0) {
                        this.banners = response.data.data ?  response.data.data : [];
                    }

                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                })
                .catch(function () {})
                .then(function () {
                    that.saving = false;
                });
            }
        }
    }
</script>